<template>
	<view>
		<div class="zong">
			<carHeader :title="'活动发布'"></carHeader>
			<u-popup :show="open" mode="center" :round="10">
				<view class="popup">
					<view class="text">
						<text>您确定要执行这样的操作吗?</text>
					</view>
					<view class="button">
						<u-button class="btn1" @click="cancel()">取消</u-button>
						<u-button class="btn2" @click="submitBtn(item)">确认</u-button>
					</view>

				</view>
			</u-popup>
			<u-notify ref="uNotify" message="操作成功" @click="submit()"></u-notify>
			<div class="body">
				<div class="bodyson">
					<uni-section>
						<view class="example">
							<view>
								<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
								<u--form labelPosition="left" :model="userInfo" :rules="rules" ref="uForm">
									<u-form-item label="标题" prop="mesTitle">
										<u--input v-model="userInfo.mesTitle"></u--input>
										<!-- <view class="example-info">
											{{userInfo.mesTitle}}
										</view> -->
									</u-form-item>
									<u-form-item label="内容" prop="mes">
										<textarea v-model="userInfo.mes"
											style="border: 1rpx solid #e6e6e6; width: 100%;" border="none"></textarea>
									</u-form-item>
									<u-form-item label="图片" prop="userInfo.mesImg">
										<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic"
											name="1" multiple :maxCount="1" :previewFullImage="true"></u-upload>
									</u-form-item>
								</u--form>
							</view>
							<div>
								<div @click="submit(res)">
									<button class="button1" type="primary">发布</button>
								</div>
							</div>
						</view>
					</uni-section>


				</div>

			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				open: false,
				show: true,
				imagePath: "",
				merchantId: 3,
				fileList1: [],
				showSex: false,
				userInfo: {
					mesTitle: '',
					mes: ''
				},
				rules: {
					'userInfo.mpTitle': {
						type: 'string',
						required: true,
						message: '请填写标题',
						trigger: ['blur', 'change']
					},
					'userInfo.mes': {
						type: 'string',
						required: true,
						message: '请填写内容',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		onLoad(res) {
			if (res.merchantId != null) {
				this.merchantId = res.merchantId;
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			cancel() {
				this.open = false;
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				var that = this;
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://localhost:8080/file/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							})
							// console.log(JSON.parse(res.data).data.url);
							this.imagePath = JSON.parse(res.data).data.url;
							console.log(this.imagePath);
						}
					});
				})
			},
			submitBtn() {
				var that = this;
				this.open = false;
				console.log('-----------------------------------');
				console.log(that.merchantId);
				uni.request({
					url: "http://localhost:8080/carShopService/message",
					data: {
						mesTitle: that.userInfo.mesTitle,
						mes: that.userInfo.mes,
						// merchantId: that.merchantId,
						mpImg: that.imagePath
					},
					method: 'POST',
					success: (res) => {
						console.log(res);
						that.$refs.uNotify.show({
							top: 40,
							type: 'success',
							color: '#eeeeee',
							bgColor: '#5ad327  ',
							message: '操作成功',
							duration: 1000 * 3,
							fontSize: 20,
							safeAreaInsetTop: true
						});
						that.userInfo.mesTitle = null;
						that.userInfo.mes = null;
						that.imagePath = null;
					}
				})
			},
			submit() {
				this.open = true;
			}
		}
	}
</script>

<style>
	.popup {
		width: 100%;
		background-color: #eeeeee;
		border-radius: 10px;
	}

	.button {
		/* background-color: #009AFF; */
		display: flex;
		/* justify-content: center; */
		margin-top: 10px;
	}

	.btn1 {
		/* border-radius: 10px; */
		background-color: #bbbbbb;
		/* margin-bottom: 5px; */
	}

	.btn2 {
		background-color: #009AFF;
		color: #ffffff;
	}

	.text {
		padding: 20px 30px;
	}

	.button1 {
		border-radius: 30px;
		position: relative;
		/* 	top: 70px; */
	}

	.example {
		padding: 15px;
		background-color: #fff;
		/* 	border-radius: 20px; */
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		/* margin-left: 10px; */
	}


	.example-body {
		padding: 10px;
		padding-top: 0;
	}


	.zong {
		background-color: #eeeeee;
		width: 100%;
		height: 670px;
	}

	.body {
		height: 930rpx;
		background-color: #ffffff;
		border-radius: 20px;
		width: 350px;
		margin: 0 auto;
		position: relative;
		top: -120px;
	}

	.bodyson {
		width: 320px;
		/* 	background-color: aqua; */
		height: 800rpx;
		margin: 0 auto;
	}
</style>